<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>后台模板</title>
    <link rel="stylesheet" type="text/css" href="plugins/jquery-easyui-1.5.5.5/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="plugins/jquery-easyui-1.5.5.5/themes/icon.css">
    <script type="text/javascript" src="plugins/jquery-easyui-1.5.5.5/jquery.min.js"></script>
    <script type="text/javascript" src="plugins/jquery-easyui-1.5.5.5/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="plugins/jquery-easyui-1.5.5.5/expands/list-to-tree-data.js"></script>
    <!--<style>-->
        <!--* {-->
            <!--font-family: "Helvetica Neue","Helvetica","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC","WenQuanYi Micro Hei","Arial",sans-serif;-->
        <!--}-->
    <!--</style>-->
    <script type="text/javascript">
        $().ready(function() {
            var treeJson = [
					{"id":"440100000000","pid":null,"text":"广州市","iconCls":"tree-folder"},
					{"id":"440101000000","pid":"440100000000","text":"市辖区","iconCls":"tree-folder"},
					{"id":"440103000000","pid":"440100000000","text":"荔湾区","iconCls":"tree-folder"},
					{"id":"440103001000","pid":"440103000000","text":"沙面街道","iconCls":"tree-file"},
					{"id":"440103002000","pid":"440103000000","text":"岭南街道","iconCls":"tree-file"},
					{"id":"440103003000","pid":"440103000000","text":"华林街道","iconCls":"tree-file"},
					{"id":"440103004000","pid":"440103000000","text":"多宝街道","iconCls":"tree-file"},
					{"id":"440103005000","pid":"440103000000","text":"昌华街道","iconCls":"tree-file"},
					{"id":"440103006000","pid":"440103000000","text":"逢源街道","iconCls":"tree-file"},
					{"id":"440103007000","pid":"440103000000","text":"龙津街道","iconCls":"tree-file"},
					{"id":"440104000000","pid":"440100000000","text":"越秀区","iconCls":"tree-folder"},
					{"id":"440104001000","pid":"440104000000","text":"洪桥街道","iconCls":"tree-file"},
					{"id":"440104003000","pid":"440104000000","text":"北京街道","iconCls":"tree-file"},
					{"id":"440104004000","pid":"440104000000","text":"六榕街道","iconCls":"tree-file"},
					{"id":"440104005000","pid":"440104000000","text":"流花街道","iconCls":"tree-file"},
					{"id":"440104007000","pid":"440104000000","text":"光塔街道","iconCls":"tree-file"},
					{"id":"440104010000","pid":"440104000000","text":"人民街道","iconCls":"tree-file"},
					{"id":"440105000000","pid":"440100000000","text":"海珠区","iconCls":"tree-folder"},
					{"id":"440105001000","pid":"440105000000","text":"赤岗街道","iconCls":"tree-file"},
					{"id":"440105002000","pid":"440105000000","text":"新港街道","iconCls":"tree-file"},
					{"id":"440105003000","pid":"440105000000","text":"昌岗街道","iconCls":"tree-file"},
					{"id":"440105005000","pid":"440105000000","text":"滨江街道","iconCls":"tree-file"},
					{"id":"440105006000","pid":"440105000000","text":"素社街道","iconCls":"tree-file"},
					{"id":"440105007000","pid":"440105000000","text":"海幢街道","iconCls":"tree-file"},
					{"id":"440105009000","pid":"440105000000","text":"龙凤街道","iconCls":"tree-file"},
					{"id":"440105010000","pid":"440105000000","text":"沙园街道","iconCls":"tree-file"},
					{"id":"440111000000","pid":"440100000000","text":"白云区","iconCls":"tree-folder"},
					{"id":"440111003000","pid":"440111000000","text":"松洲街道","iconCls":"tree-file"},
					{"id":"440111004000","pid":"440111000000","text":"景泰街道","iconCls":"tree-file"},
					{"id":"440111005000","pid":"440111000000","text":"同德街道","iconCls":"tree-file"},
					{"id":"440111006000","pid":"440111000000","text":"黄石街道","iconCls":"tree-file"},
					{"id":"440111007000","pid":"440111000000","text":"棠景街道","iconCls":"tree-file"},
					{"id":"440111008000","pid":"440111000000","text":"新市街道","iconCls":"tree-file"},
					{"id":"440111009000","pid":"440111000000","text":"同和街道","iconCls":"tree-file"},
					{"id":"440300000000","pid":null,"text":"深圳市","iconCls":"tree-folder"},
					{"id":"440301000000","pid":"440300000000","text":"市辖区","iconCls":"tree-folder"},
					{"id":"440303000000","pid":"440300000000","text":"罗湖区","iconCls":"tree-folder"},
					{"id":"440303001000","pid":"440303000000","text":"桂园街道办事处","iconCls":"tree-file"},
					{"id":"440303002000","pid":"440303000000","text":"黄贝街道办事处","iconCls":"tree-file"},
					{"id":"440303003000","pid":"440303000000","text":"东门街道办事处","iconCls":"tree-file"},
					{"id":"440303004000","pid":"440303000000","text":"翠竹街道办事处","iconCls":"tree-file"},
					{"id":"440303005000","pid":"440303000000","text":"南湖街道办事处","iconCls":"tree-file"},
					{"id":"440303006000","pid":"440303000000","text":"笋岗街道办事处","iconCls":"tree-file"},
					{"id":"440304000000","pid":"440300000000","text":"福田区","iconCls":"tree-folder"},
					{"id":"440304001000","pid":"440304000000","text":"南园街道办事处","iconCls":"tree-file"},
					{"id":"440304002000","pid":"440304000000","text":"园岭街道办事处","iconCls":"tree-file"},
					{"id":"440304004000","pid":"440304000000","text":"福田街道办事处","iconCls":"tree-file"},
					{"id":"440304005000","pid":"440304000000","text":"沙头街道办事处","iconCls":"tree-file"},
					{"id":"440304007000","pid":"440304000000","text":"梅林街道办事处","iconCls":"tree-file"},
					{"id":"440305000000","pid":"440300000000","text":"南山区","iconCls":"tree-folder"},
					{"id":"440305001000","pid":"440305000000","text":"南头街道办事处","iconCls":"tree-file"},
					{"id":"440305002000","pid":"440305000000","text":"南山街道办事处","iconCls":"tree-file"},
					{"id":"440305003000","pid":"440305000000","text":"沙河街道办事处","iconCls":"tree-file"},
					{"id":"440305005000","pid":"440305000000","text":"蛇口街道办事处","iconCls":"tree-file"},
					{"id":"440305009000","pid":"440305000000","text":"西丽街道办事处","iconCls":"tree-file"},
					{"id":"440306000000","pid":"440300000000","text":"宝安区","iconCls":"tree-folder"},
					{"id":"440306001000","pid":"440306000000","text":"新安街道办事处","iconCls":"tree-file"},
					{"id":"440306003000","pid":"440306000000","text":"西乡街道办事处","iconCls":"tree-file"},
					{"id":"440306004000","pid":"440306000000","text":"福永街道办事处","iconCls":"tree-file"},
					{"id":"440306005000","pid":"440306000000","text":"沙井街道办事处","iconCls":"tree-file"},
					{"id":"440306006000","pid":"440306000000","text":"松岗街道办事处","iconCls":"tree-file"},
					{"id":"440306008000","pid":"440306000000","text":"石岩街道办事处","iconCls":"tree-file"},
					{"id":"440307000000","pid":"440300000000","text":"龙岗区","iconCls":"tree-folder"},
					{"id":"440307003000","pid":"440307000000","text":"平湖街道办事处","iconCls":"tree-file"},
					{"id":"440307006000","pid":"440307000000","text":"坪地街道办事处","iconCls":"tree-file"},
					{"id":"440307007000","pid":"440307000000","text":"坪山街道办事处","iconCls":"tree-file"},
					{"id":"440307008000","pid":"440307000000","text":"坑梓街道办事处","iconCls":"tree-file"},
					{"id":"440307009000","pid":"440307000000","text":"葵涌街道办事处","iconCls":"tree-file"},
					{"id":"440307010000","pid":"440307000000","text":"大鹏街道办事处","iconCls":"tree-file"},
					{"id":"440307011000","pid":"440307000000","text":"南澳街道办事处","iconCls":"tree-file"},
					{"id":"440308000000","pid":"440300000000","text":"盐田区","iconCls":"tree-folder"},
					{"id":"440308001000","pid":"440308000000","text":"梅沙街道办事处","iconCls":"tree-file"},
					{"id":"440308002000","pid":"440308000000","text":"盐田街道办事处","iconCls":"tree-file"},
					{"id":"440308003000","pid":"440308000000","text":"沙头角街道办事处","iconCls":"tree-file"}
			];

            $('#menuTree').tree({
                data: treeJson,
                onClick: function (node) {
                    //判断是叶子节点且有URL属性
                    if (node.hasOwnProperty('children') == false) {
                        // tab的标题不是唯一的，不能通过名称某个tab是否已存在，不存在先创建，如果存在就选择
                        // easyui提过的API只有通过tab的标题或者下标来判断tab是否存在
                        $('#mainPageTab').tabs('add',{
                            title: 'accordion',
                            // href:'accordion.html',
                            content: '<div style="padding:10px;">accordion</div>',
                            closable:true
                        });
                    } else {
                        // easyui tree当点击父节点时让直系子节点展开
                        $(this).tree('toggle', node.target);//单击文本切换展开/折叠节点的状态
                    }
                },
				onLoadSuccess:function() {  
					$(this).tree("collapseAll");
				},
				parentField:"pid",
        		textFiled:"text",
        		idFiled:"id"
            });

            $('#menuTree .tree-node').css('height','28px');
            $('#menuTree .tree-title').css('font-size','18px');
            $('#menuTree .tree-title').css('height','28px');
            $('#menuTree .tree-title').css('line-height','28px');
            $('#menuTree .tree-title').css('padding','0px');
            $('#menuTree .tree-title').css('margin','0px');

            function setWindowSize() {
                var height = $(window).height()-16;
                $("#outerLayout").attr("style","width:100%;height:"+height+"px");
                $("#outerLayout").layout("resize", {
                    width:"100%",
                    height:height+"px"
                });
            };
            $(document).ready(setWindowSize);
            $(window).resize(setWindowSize);
        });
    </script>

</head>
<body>
<div id="outerLayout" class="easyui-layout">
    <div data-options="region:'north'" style="height:50px"></div>
    <div id="menuTree" data-options="region:'west', split:true" title="菜单导航栏" style="width:250px;"></div>
    <div data-options="region:'center'">
        <div id="mainPageTab" class="easyui-tabs" style="width:100%;height:100%"></div>
    </div>
</div>
</body>
</html>
